<template>
	<view class="page">
		<view class="header">
			<!--排序按钮栏  -->
			<view class="sortBtn">
				<view :class="tab_index == 1 ? 'textLinear':''" :data-order="sort_data[1]" data-by="id" @tap='sortTap' :data-index='1'>综合</view>
				<view :class="tab_index == 2 ? 'textLinear':''" :data-order="sort_data[2]" data-by="sales_sum" @tap='sortTap' :data-index='2'>销量</view>
				<view :class="tab_index == 3 ? 'textLinear':''" :data-order="sort_data[3]" data-by="b.shop_price" @tap='sortTap' :data-index='3'>价格</view>
				<view class='shaixuan' @tap='showDrawer'>筛选</view>
			</view>
			<view class="classifyBtn">
				<view class="btn" v-if="isZone" @tap="classToggle(1)"><text class="text" :class="isZone? 'on':''">{{category_text}}</text></view>
				<view class="btn" @tap="classToggle(2)"><text class="text" :class="isNew? 'on':''">新品</text></view>
				<view class="btn" @tap="classToggle(3)"><text class="text" :class="isRecommend? 'on':''">推荐</text></view>
				<view class="btn" @tap="classToggle(4)">
					<view class="text arrow" :class="isClassify? 'on':''">
						<view>分类</view><arrow size="35" class="cc" :color="isClassify?'#f33535':'#333333'" :direction="isClassify?'top':'bottom'"></arrow>
					</view>
				</view>
			</view>
			<!--分类区域  -->
			<view class="classify-cont" v-if="isClassify">
				<scroll-view class="content" scroll-y="true" :style="{'height': windowHeight + 'px'}">
					<view class="item" v-for="(oneItem, OneIndex) in category_data" :key="OneIndex">
						<view class="title">{{oneItem.name}}</view>
						<view class="list">
							<view class="cate_item" v-for="(twoItem, TwoIndex) in oneItem._child" :key="TwoIndex" :class="twoItem._child?'on':''">
								<text class="bame" @tap="tapCate" :class="actIndex == twoItem.id?'on':''" :data-id="twoItem.id">{{twoItem.name}}</text>
								<view class="three-cate" v-if="twoItem._child">
									<text v-for="(threeItem, ThreeIndex) in twoItem._child" :key="ThreeIndex" @tap="tapCate" :data-id="threeItem.id" :class="actIndex == threeItem.id?'on':''">{{threeItem.name}}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="classify-btn-bg"></view>
				</scroll-view>
				<view class="classify-btn"><text @tap="cateChoose('cancel')">取消</text><text @tap="cateChoose('sure')">确定</text></view>
			</view>
		</view>
		<view class="header-bg"></view>
		<!--商品列表  -->
		<scroll-view class="goodList" scroll-y @scrolltolower='loadMore' enable-back-to-top='true'>
			<navigator open-type="navigate" class='listItem' :url="'/pages/jewel/goods/show?goods_id='+item.id" v-for="(item, index) in datalist" :key="index">
				<image src="../../../static/icons/jewel/tip1.png" class="tips-pic daiyan" v-if="item.is_daiyan_zone == 1"></image>
				<image src="../../../static/icons/jewel/tip3.png" class="tips-pic baojia" v-if="item.is_baojia_zone == 1"></image>
				<view class='goodImgbox'>
					<image class='goodimg' :src='item.thumb' :lazy-load="true" mode="aspectFill"></image>
				</view>
				<view class='goodTitle'><text class="goodTitle-red" v-if="item.yield_text">{{item.yield_text}}</text>{{item.goods_name}}</view>
				<view class="watch-slogan" v-if="loadData.is_seller != 1">{{item.show_return_title}}</view>
				<view class="marketPrice" v-else>市场价:¥{{item.market_price}}</view>
				<view class='goodTip'>
					<view class='goodPrice'><text class="goodPrice-text" v-if="loadData.is_seller == 1">聚划算：</text>¥{{item.price}}</view>
					<view class='goodshoucang' :class="{goodshoucangSeller:loadData.is_seller == 1}">已售{{item.sales_sum}}</view>
				</view>
			</navigator>
		</scroll-view>
		
		<!--筛选区域  -->
		<uni-drawer :visible="showRigth" mode="right" @close="closeDrawer">
			<scroll-view scroll-y class="listww">
				<view class='goodAttr' v-for="(item, index) in attribute" :key="index">
					<view class='attrTittle'>{{item.name}}：</view>
					<view class='attr' :class="val.current" v-for="(val, key) in item.items" :data-arrkey="index" :data-itemkey="key" :key="key" :data-item_id="val.id" :data-attr_id="item.id" @tap="attr_search">{{val.item}}</view>
				</view>
				<view style="height:50px"></view>
			</scroll-view>
			<view class="uni-common-button">
				<view class="common-button" @tap="reset_search">重置</view>
				<view class="common-button sure" @tap="confirm_search">确认</view>
			</view>
		</uni-drawer>
		
		<!-- 规则弹框 -->
		<image src="@/static/icons/transfer/rule-icon.png" class="rule-icon" v-if="loadData.is_daiyan_zone == 1" @tap="showRule"></image>
		<view class="rule-mark" v-if="ruleShow" @tap="showRule"></view>
		<view class="g-popup-rule" v-if="ruleShow">
		    <view>爆款区规则</view>
		    <scroll-view class="content" scroll-y>
				<view v-html="ruleData"></view>
		    </scroll-view>
		    <view class="g-popup-close" @tap="showRule">
		        <close size="40" color="#fff"></close>
		    </view>
		</view>
		
		<view class="m-no-data" v-if="showNodata">
			<image src="../../../static/images/no_data.png" mode="widthFix"></image>
		</view>
	</view>
</template>
<script>
	let that;
	import jewel from '@/common/common_zb.js';
	export default {
		data() {
			return {
				datalist: [],	// 列表数据
				tab_index: 1, 	// 默认显示的tab index 
				cat_id: 0,	// 分类id
				attribute: [],	// 列表属性
				attribute_id: [],	// 属性id
				search_data: {},	// 搜索的数据
				sort_data: {
					1: 'desc', 2: 'desc', 3: 'desc'
				},	// 排序数据
				is_load: 0,	// 是否已加载数据	
				page: 1,
				totalPages: 1,
				loadtype: 'normal',	// 加载数据方式
				showRigth: false,
				showNodata: false,
				class_idx:0,
				isZone: true,
				isClassify:false,
				isNew: false,
				isRecommend: false,
				isShowZoneName: false,
				category_data:[],
				actIndex: 0, // 当前点击的分类id
				windowHeight:300,
				category_text: '',
				iskeyword:false,
				loadData:{},
				ruleShow:false,
				ruleData:[],
				videoSrc:'',
				videoContext:''
			}
		},	
		mounted() {
			that = this
		},
		onLoad(options) {
			let that = this
			let data = {}
			uni.hideKeyboard()
			that.loadData = options
			if(options.is_seller == 1){
				that.search_data = options;
				that.search_data.is_seller = 1
				that.search_data.page = 1
				that.isZone = false
				data.is_seller = 1
			}
			if(options.is_vip_zone == 1){
				that.search_data = options;
				that.category_text = 'VIP专区';
			}
			if(options.is_daiyan_zone == 1){
				that.search_data = options;
				that.category_text = '爆款区';
			}
			if(options.cat_id) {
				that.cat_id = options.cat_id;
				that.search_data.cat_id = options.cat_id;
				that.isZone = false
			}
			if(options.keyword) {
				that.cat_id = options.keyword;
				that.search_data.keyword = options.keyword;
				that.iskeyword = true
				that.isZone = false
			}
			if(options.franchise_price == 1){
				that.search_data = options;
				that.isZone = false
			}
			that.getList(that.search_data);
			
			
			jewel.get('goods/getGoodsCategory', data, false, function(res){
				that.category_data = res.data.data;
			})
			
			jewel.get('Goods/baokuan_rule',{}, false, function(res){
				if(res.data.code == 0){
					that.ruleData = res.data.data.list;
				}
			})
			
			uni.getSystemInfo({
				success: function (res) {
					that.windowHeight = res.windowHeight
				}
			});
			//修改原生搜索框的关键字
			// #ifdef APP-PLUS
			var webView = this.$mp.page.$getAppWebview();
			webView.setTitleNViewSearchInputText(options.keyword||'')
			// #endif
		},
		// 上拉加载
		onReachBottom(){
			this.loadMore()
		},
		
		methods: {
			// 获取列表数据
			getList(data){
				let that = this;
				if(that.page <= that.totalPages){
					uni.showLoading({
						title:'加载中'
					})
					new Promise((resolve, reject) => {
						jewel.post('goods/searchGoods', data, false,function(res){
							uni.hideLoading()
							let data = res.data;
							let count = data.count;
							that.showNodata = data.count === 0?true:false;
							if(that.loadtype == 'plus') {
								that.datalist = that.datalist.concat(data.data);
							}else{
								that.datalist = []
								that.datalist = data.data;
								uni.stopPullDownRefresh();
							}
							that.totalPages = data.total_pages == 0?1:data.total_pages;
							if(that.is_load == 0) {	// 首次加载才获取分类属性
								that.is_load = 1;
								resolve(that.cat_id);	// 分类id
							}
						})
					}).then((cat_id)=>{
						// 获取分类属性
						jewel.get('goods/getGoodsAttribute', {cat_id: cat_id,keyword:that.search_data.keyword,is_seller:that.search_data.is_seller}, false, function(res){
							let data = res.data.data;
							that.attribute = data;
							uni.hideLoading()
						})
						
						
					})
				}
			},
			// 顶部排序索引
			sortTap(e){
				let index = e.currentTarget.dataset.index;
				let sort_data = that.sort_data;
				sort_data[index] = sort_data[index] == 'desc' ? 'asc' : 'desc';
				let order = e.currentTarget.dataset.order;	// 排序
				let by = e.currentTarget.dataset.by;	// 条件
				that.search_data.order = order;
				that.search_data.by = by;
				that.datalist = [];
				that.search_data.page = that.page = 1;
				that.getList(that.search_data);
				that.tab_index = index;
				that.sort_data = sort_data;
				that.isClassify = false;
				if(that.class_idx == 4){
					that.class_idx = 0;
				}
			},
			showDrawer() {
				this.showRigth = true;
				if(this.isClassify){
					this.isClassify = false;
					this.class_idx = 0;
				}
			},
			closeDrawer() {
				this.showRigth = false;
			},
			// 点击属性，搜索产品
			attr_search(e){
				let attr_id = e.currentTarget.dataset.attr_id;	// 
				let item_id = e.currentTarget.dataset.item_id;
				let arrkey = e.currentTarget.dataset.arrkey;	// 一维数组的key
				let itemkey = e.currentTarget.dataset.itemkey;	// items 下面数组的key
				let attribute = this.attribute;	//　属性规格数据集
				let attribute_id = this.attribute_id;	// 选中的attribute_id集合
				attribute[arrkey]['items'][itemkey].current = attribute[arrkey]['items'][itemkey].current == 'current' ? '': 'current';
				let array = {attr_id: attr_id, item_id: [item_id]};
				var is_includes = false;
				var is_includes_two = false;
				var len = 0;
				if(attribute_id.length>0) {
					var is_includes = false;
					var k = 0;
					for (let i in attribute_id) {
						if(attribute_id[i]['attr_id'] == attr_id) {
							k = i;
							is_includes = true; break;
						}
					}
					if(is_includes) {
						if(typeof attribute_id[k]['item_id'] == 'string') {
							attribute_id[k]['item_id'] = attribute_id[k]['item_id'].split(',');
						}
						is_includes_two = attribute_id[k]['item_id'].includes(item_id);	// 查询是否存在数组里面
						if(is_includes_two) {
							len = attribute_id[k]['item_id'].indexOf(item_id)	//如果存在数组里面，删除
							attribute_id[k]['item_id'].splice(len, 1);
						}else{
							attribute_id[k]['item_id'].push(item_id);
						}
					}else{
						attribute_id.push(array);
					}
				}else{
					attribute_id.push(array);
				}
				this.attribute_id = attribute_id;
				this.attribute = attribute;
			},
			// 获取键盘事件，搜索关键字
			search_keyword(e){
				let keyword = e.target.value;
				this.search_data.loadtype = 'normal';
				this.search_data.keyword = keyword;
				this.getList(this.search_data);
			},
			// 清空已选择的属性规格
			reset_search(){
				this.attribute_id = [];
				let attribute = this.attribute;
				for (let i in attribute) {
					for(let k in attribute[i]['items']) {
						attribute[i]['items'][k]['current'] = '';
					}
				}
				this.attribute = attribute;
			},
			// 属性规格搜索
			confirm_search(){
				let that = this;
				that.page = 1;
				that.totalPages = 1;
				that.loadtype = 'normal';
				that.search_data.attr = this.get_json();
				that.search_data.page = 1;
				that.getList(that.search_data);
				that.closeDrawer();
			},
			// 解决变量被引用到内存地址
			get_json(){
				let attr_data = JSON.parse(JSON.stringify(this.attribute_id))
				for (let i in attr_data) {
					if(attr_data[i]['item_id'] !='') {
						attr_data[i]['item_id'] = attr_data[i]['item_id'].join(',');
					}else{
						attr_data.splice(i, 1);
					}
				}
				return attr_data;
			},
			classToggle(idx){
				let that = this;
				switch(idx){
					case 1:
						return false
					break;
					case 2:
						that.isNew = !that.isNew
						if(that.isNew){
							that.search_data.is_new = 1
						}else{
							that.search_data.is_new = ''
						}
						if(that.isClassify){
							that.isClassify = false
						}
					break;
					case 3:
						that.isRecommend = !that.isRecommend
						if(that.isRecommend){
							that.search_data.is_recommend = 1
						}else{
							that.search_data.is_recommend = ''
						}
						if(that.isClassify){
							that.isClassify = false
						}
					break;
					case 4:
						that.isClassify = !that.isClassify;
						return false
					break;
				}
				that.search_data.page = that.page = 1;
				that.search_data.cat_id = that.cat_id;
				if(that.totalPages == 0) that.totalPages = 1;
				that.datalist = [];
				that.getList(that.search_data);
			},
			tapCate(e) {
				let that = this;
				let cate_id = e.currentTarget.dataset.id;
				that.cat_id = cate_id;
				that.actIndex = cate_id
				console.log(JSON.stringify(that.loadData),'tapCate')
			},
			showRule() {
				let that = this
				that.ruleShow = !that.ruleShow;
			},
			// 加载更多
			loadMore(){
				this.loadtype = 'plus';
				this.page++;
				this.search_data.page = this.page;
				if(this.datalist.length === 0) return false
				this.getList(this.search_data)
			},
			cateChoose(type){
				let that = this
				switch(type){
					case 'cancel':
						that.isClassify = false
						// that.search_data = {
						// 	is_daiyan_zone: "1",
						// 	page: 1
						// }
						that.actIndex = -1
						// that.getList(that.loadData);
					break;
					case 'sure':
						that.search_data.page = that.page = 1;
						that.search_data.cat_id = that.cat_id
						that.isClassify = false;
						if(that.class_idx == 4){
							that.class_idx = 0;
						}
						// 获取分类属性
						jewel.get('goods/getGoodsAttribute', {cat_id: that.cat_id}, false, function(res){
							let data = res.data.data;
							that.attribute = data;
						})
						that.getList(that.search_data);
					break;
				}
			}
		},
		onNavigationBarSearchInputConfirmed(e){
			let that = this
			let text = e.text
			that.datalist = []
			that.search_data.loadtype = 'normal';
			that.search_data.keyword = text;
			that.page = that.totalPages = that.search_data.page = 1
			that.getList(that.search_data);
			uni.hideKeyboard()
		}
	}
</script>

<style>
.page {
  overflow-x: hidden;
}
/*公共样式  */
page{
  font-size: 34rpx;
  background: #f0f0f0;
}
/*头部  */
.header{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 10;
	background: #FFFFFF;
	border-radius: 0 0 5px 5px;
	/* #ifdef H5 */
	top: 88rpx;
	/* #endif */
}
.header-bg{
	height: 154rpx;
	width: 100%;
}


/*排序按钮  */
.sortBtn{
  width: 750rpx;
  background: #fff;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
}
.sortBtn view{
	font-size: 28rpx;
	color: #1a1a1a;
	flex: 1;
	height: 80rpx;
	text-align: center;
	line-height: 68rpx;
	position: relative;
}
.sortBtn .textLinear{
	color: #fd6361;
}
.sortBtn .textLinear::after {
  content: '';
  display: block;
  position: absolute;
  bottom: 16rpx;
  left: 50%;
  transform: translateX(-50%);
  background: #fd6361;
  width: 40rpx;
  height: 6rpx;
  border-radius: 100rpx;
}

/*商品列表  */
.goodList{
  width: 750rpx;
}
.listItem{
  width: 354rpx;
  background: #fff;
  margin: 15rpx 0 0 15rpx;
  overflow: hidden;
  position: relative;
  border-radius: 5px;
  display: inline-block;
  vertical-align: top;
}
.watch-slogan {
  border: 1px solid #fd6361;
  background: #fff;
  color: #fd6361;
  border-radius: 100rpx;
  margin-left: 15rpx;
  padding: 5rpx 10rpx;
  font-size: 24rpx;
  display: inline-block;
  margin-top: 6rpx;
}
.goodImgbox{
  width: 354rpx;
  height: 354rpx;
  text-align: center;
}
.goodImgbox .goodimg{
  width: 354rpx;
  height: 354rpx;
  border-radius: 6rpx;
}
.goodTitle{
  width: 354rpx;
  height: 105rpx;
  box-sizing: border-box; 
  padding: 15rpx 16rpx;
  padding-bottom: 0;
  color: #1a1a1a;
  font-size: 28rpx;
  line-height:45rpx; 
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient: vertical;
}
.goodTitle text{
	color: #ffffff;
	background: #ea669f;
	border-radius: 3px;
	padding: 0 7rpx;
	margin-right: 10rpx;
	font-size: 24rpx;
}
.goodTip{
  box-sizing: border-box;
  padding: 15rpx;
  padding-top: 10rpx;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.goodPrice{
  font-size: 32rpx;
  color: #fd6361;
  font-weight: bold;
}
.goodPrice-text{
	font-size: 28rpx;
}
.goodshoucang{
  font-size: 26rpx;
  color: #9b9b9b;
}
.goodshoucangSeller{
	position: absolute;
	top: 10rpx;
	right: 8rpx;
	background-color: #F06060;
	color: #FFFFFF;
	padding: 10rpx;
}
.tips-pic{
	position: absolute;
	top: 10rpx;
	left: 8rpx;
	z-index: 9;
}
.tips-pic.daiyan{
	width: 80rpx;
	height: 50rpx;
}
.tips-pic.baojia{
	width: 120rpx;
	height: 71rpx;
}
/*筛选区域  */
.screen{
  width: 700rpx;
  height: 100vh; 
  position: fixed;
  top: 0;
  z-index: 4;
  transition: left 0.4s ease;
  -webkit-transition: left 0.4s ease;
}
.screen .cover{
  width: 750rpx;
   height: 100vh; 
  background: #000;
  position: fixed;
  top: 0;
  z-index: 1;
  transition: left,opacity 0.4s ease;
  -webkit-transition: left,opacity 0.4s ease;
}
.screen scroll-view{
  width: 650rpx;
  height: 100%;
  position: fixed;
  top: 0;
  z-index: 2;
  background: #fff;
  box-sizing: border-box;
  padding: 40rpx 30rpx;
  transition: right 0.4s ease;
  -webkit-transition: right 0.4s ease;
}
.goodAttr{
  margin-bottom: 50rpx;
}
.goodAttr .current{
  border: 1px solid #bea374;
  color: #bea374;
  background: #fff;
}
.attrTittle{
  color: #555;
}
.attr{
  display: inline-block;
  width: auto;
  height: 60rpx;
  line-height: 60rpx;
  padding: 0 20rpx;
  background: #eee;
  color: #555;
  border-radius: 8rpx;
  margin: 15rpx 20rpx 0 0;
  overflow: hidden;
  vertical-align: top;
  border: 1px solid #eee;
}
.goodAttr .current {
	border:1px solid #F33535;
	color:#F33535;
	background:#fff;
}

.screenBottom{
  width: 650rpx;
  height: 100rpx;
  position: fixed;
  top: 0;
  z-index: 3;
  right: 0;
}
.screenBottom view{
  display: inline-block;
  height: 100rpx;
  width: 325rpx;
  color: #fff;
  font-size: 35rpx;
  text-align: center;
  line-height: 100rpx;
	border-top: 1px solid #ccc;
	background: #fff;
}
.reset{
  color: #666!important;
}
.queding{
	background: #ff5777;
}
.open_contact{
  border: none;
  padding-left:0px;
  padding-right:0px;
  overflow: auto;
  line-height:1.25;
  position: absolute;
  right: 0rpx;
  top: 0rpx;
  width: 86rpx;
  height: 86rpx;
  background: none!important
}
.open_contact::after{
  content: none
}
.uni-common-button{
	position: absolute;
	bottom: 0;
	width: 100%;
	left: 0rpx;
	text-align: center;
	background: #000000;
	color: #ffffff;
	font-size: 32rpx;
	display: flex;
	align-items: center;
}
.uni-common-button .common-button{
	flex: 1;
	padding: 30rpx 0;
}
.uni-common-button .sure{
	background: #f33535;
}
.listww{
	padding: 20rpx;
	height: 90%;
}
.m-no-data image{
	width: 70%;
}
.autarky-btn{
	width: 96rpx;
	height: 58rpx;
}
.autarky-btn image{
	width: 100%;
	height: 100%;
}
.autarky-btn .back{
	border: 1px solid #7a7878;
	text-align: center;
	line-height: 54rpx;
	border-radius: 50px;
	font-size: 26rpx;
	color: #7a7878;
}
.classifyBtn{
	display: flex;
	align-items: flex-start;
	padding-bottom: 28rpx;
}
.classifyBtn .btn{
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
}
.classifyBtn .btn .text{
	width: 150rpx;
	line-height: 52rpx;
	color: #333333;
	font-size: 26rpx;
	text-align: center;
	border-radius: 20px;
	background-color: #e6e6e6;
}

.classifyBtn .btn .text.on{
	background: #fbd8d8;
	color: #f33535;
}
.classifyBtn .btn .arrow{
	display: flex;
	justify-content: center;
	align-items: center;
}
.classifyBtn .cc{
	margin-left: 10rpx;
}


.classify-cont{
	position: fixed;
	top: 154rpx;
	/* #ifdef H5 */
	top: 242rpx;
	/* #endif */
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 11;
	background: rgba(0,0,0,.5);
}
.classify-cont .content{
	background: #FFFFFF;
	height: 100%;
}
.classify-cont .item{
	border-top: 13rpx solid #f4f4f4;
}
.classify-cont .item .title{
	color: #343434;
	font-size: 30rpx;
	font-weight: bold;
	padding-left: 66rpx;
	line-height: 76rpx;
	position: relative;
}
.classify-cont .item .title:after{
	content: '';
	position: absolute;
	top: 50%;
	left: 43rpx;
	background: #000000;
	width: 10rpx;
	height: 10rpx;
	margin-top: -5rpx;
}
.classify-cont .item .list {
	display: flex;
	flex-wrap: wrap;
}
.classify-cont .item .list .cate_item.on{
	width: 100%;
}
.classify-cont .item .list .cate_item .bame{
	color: #999999;
	font-size: 30rpx;
	border-radius: 30rpx;
	line-height: 54rpx;
	background: #f1f1f1;
	padding: 0 40rpx;
	margin: 0 23rpx;
	margin-bottom: 20rpx;
	display: inline-block;
}

.classify-cont .item .list .cate_item .bame.on{
	background: #fbd8d8;
	color: #f33535;
}
.classify-cont .item .list .cate_item .three-cate{
	margin-left: 50rpx;
	display: flex;
	margin-bottom: 20rpx;
}
.classify-cont .item .list .cate_item .three-cate text{
	margin-right: 30rpx;
	padding: 10rpx 0;
}
.classify-cont .item .list .cate_item .three-cate text.on{
	color: #f33535;
}
.classify-cont .classify-btn{
	display: flex;
	justify-content: center;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: #000000;
	z-index: 10;
}
.classify-cont .classify-btn text{
	flex: 1;
	line-height: 88rpx;
	text-align: center;
	color: #FFFFFF;
	background-color: #f33535;
}
.classify-cont .classify-btn text:first-child{
	background-color: #000000;
}
.classify-cont .classify-btn-bg{
	width: 100%;
	height: 88rpx;
}
/* 规则弹框 */
.rule-icon{
	position: fixed;
	bottom: 100rpx;
	right: 0;
	width: 154rpx;
	height: 154rpx;
	display: block;
	z-index: 1;
}
.rule-mark{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background: rgba(0,0,0,.5);
	height: 100%;
	z-index: 99;
}
.g-popup-rule {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: #fff;
	border-radius: 5px;
	width: 600rpx;
	padding: 20px;
	z-index: 100;
	font-size: 28rpx;
}

.g-popup-rule>view {
	padding-left: 10px;
	margin-bottom: 10px;
}

.g-popup-rule:after {
	content: '';
	display: block;
	width: 3px;
	height: 15px;
	background: #d71311;
	position: absolute;
	top: 21px;
	left: 10px;
}
.g-popup-rule .content{
	max-height: 500rpx;
}
.g-popup-rule .g-popup-close {
	padding: 5px;
	border-radius: 100px;
	border: 3px solid #fff;
	position: absolute;
	bottom: -60px;
	left: 50%;
	transform: translateX(-50%);
}

.bao-video{
	margin-top: 20rpx;
	width: 600rpx;
}
.marketPrice{
	color: #fd6361;
	font-weight: bold;
	padding: 0 14rpx;
}
</style>